<!--
 * @Author      : ZhouQiJun
 * @Date        : 2025-07-30 08:57:56
 * @LastEditors : ZhouQiJun
 * @LastEditTime: 2025-08-09 20:35:31
 * @Description : setupBaseLayer 用法测试
-->
<script setup>
import { ref, watch } from 'vue'

import { useEvents, useMap } from '#ol-vue-hooks'

import { baseLayers, guiYang } from './testData'

const wmtsLayers = baseLayers.filter((ele) => ele.type === 'wmts')

const mapKey = 'testSetupBaseLayer'
const { setupBase, setTarget, inited } = useMap(
  {
    bgUrl: false,
    center: guiYang,
    zoom: 10,
    projection: 'EPSG:4326',
  },
  baseLayers[0],
  mapKey,
)

const { isOn } = useEvents('click', onClick, mapKey)

const loaded = ref()
const selectedBase = ref(baseLayers[0].name)

watch(selectedBase, (name) => {
  const options = baseLayers.find((layer) => layer.name === name)
  loaded.value = false
  setupBase(options).then(() => {
    loaded.value = true
  })
})

function onClick(event, attachment) {
  console.log({ event, attachment })
}
</script>

<template>
  <div class="TheSetupBaseLayer">
    <div :ref="setTarget" data-testid="map-setup-base"></div>
    <div class="desc">
      <h3>设置底图</h3>
      <h4>wmts 图层</h4>
      <p>初始化完成了吗？{{ inited }}</p>
      <p>图层加载完了吗？{{ loaded ?? inited }}</p>
      <p>绑定 click 事件了吗？{{ isOn }}</p>
      <el-radio-group v-model="selectedBase" size="large">
        <el-radio-button
          v-for="layer in wmtsLayers"
          :label="layer.label"
          :value="layer.name"
          :key="layer.name"
        />
      </el-radio-group>
    </div>
  </div>
</template>

<style lang="scss">
.TheSetupBaseLayer {
  & > :first-child {
    width: 500px;
    height: 300px;
    background-color: lightblue;
  }
}
</style>
